<script setup lang="ts">
import { ref,watch } from 'vue'
//import RedPacketRain from '@/components/common/RedPacketRain.vue'
import $api from '@/api/index'
import {useStore} from 'vuex'
import {useRouter,useRoute} from 'vue-router'
const $router=useRouter(),$route=useRoute(),$store=useStore()

defineProps<{ msg: string }>()
const username=ref(''),password=ref(''),canLogin=ref(false)
watch([username,password],([usr,pwd]) =>{
  if(usr&&pwd){
    canLogin.value=true
  }else{
    canLogin.value=false
  }
})
const login=() =>{
  if(!canLogin.value) return
  _hmt.push(['loginClick','login','click','account',username.value])
  const {data}=$api.user.login(username.value,password.value)
  watch([data],([res]) =>{
    $store.commit('user/setToken',res.token)
    $store.commit('user/setUser',res)
    if($route.query?.to){
      $router.replace($route.query.to as string)
    }else{
      $router.replace({
        name:'home'
      })
    }
  })
}
function loginByGitee(){
  const client_id=import.meta.env.VITE_GITEE_CLIENT_ID
  const redirect_uri=import.meta.env.VITE_GITEE_REDIRECT_URI
  _hmt.push(['loginGiteeClick','login','click'])
  location.href=`https://gitee.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code`
}
function loginByQQ(){
  const client_id=import.meta.env.VITE_QQ_CLIENT_ID
  const redirect_uri=import.meta.env.VITE_QQ_REDIRECT_URI
  const scope='get_user_info'
  _hmt.push(['loginQQClick','login','click'])
  location.href=`https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=${client_id}&redirect_uri=${redirect_uri}&scope=${scope}&state=123456`
}
function loginByAliPay() {
  const appid=import.meta.env.VITE_ALIPAY_APPID
  const redirect_uri=import.meta.env.VITE_ALIPAY_REDIRECT_URI
  const url=`https://openauth.alipaydev.com/oauth2/publicAppAuthorize.htm?app_id=${appid}&scope=auth_user&redirect_uri=${encodeURIComponent(redirect_uri)}&state=init`
  _hmt.push(['loginAliPayClick','login','click'])
  location.href=`alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(url)}`
}
function loginByWX() {
  const appid=import.meta.env.VITE_WX_APPID
  const redirect_uri=import.meta.env.VITE_WX_REDIRECT_URI
  _hmt.push(['loginWXClick','login','click'])
  location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=123456#wechat_redirect`
}
</script>

<template>
  <!-- <RedPacketRain /> -->
  <div
    w:m="x-8"
  >
    <div
      w:w="full"
      w:h="24"
      w:p="y-4"
      w:m="t-4"
      w:box="content"
      w:border="b-1 gray-200 solid"
    >
      <input placeholder="用户名/邮箱/手机号" v-model="username"
        w:w="full"
        w:h="full"
        w:border="none"
        w:outline="none"
        w:text="4xl"
      />
    </div>
    <div
      w:w="full"
      w:h="24"
      w:p="y-4"
      w:m="t-4"
      w:box="content"
      w:border="b-1 gray-200 solid"
    >
      <input placeholder="请输入密码" v-model="password" type="password"
        w:w="full"
        w:h="full"
        w:border="none"
        w:outline="none"
        w:text="4xl"
      />
    </div>
    <div @click="login" :class="{'opacity-50': !canLogin}"
      w:h="28"
      w:flex="~"
      w:justify="center"
      w:align="items-center"
      w:border="rounded-full 1"
      w:text="4xl light-50"
      w:gradient="to-r from-red-600 to-red-400"
      w:m="t-16"

    ><span>登录</span></div>
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="center"
      w:text="gray-400"
      w:m="y-16"
    >
      <div
        w:flex="1"
        w:border="t-1 solid gray-400"
      ></div>
      <div
        w:text="3xl"
        w:m="x-16"
      >其他方式登录</div>
      <div
        w:flex="1"
        w:border="t-1 solid gray-400"
      ></div>
    </div>
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="center"
    >
      <div @click="loginByGitee"
        w:flex="~ col nowrap"
        w:align="items-center"
        w:text="3xl gray-500"
        w:m="x-12"
      >
        <div class="iconfont icon-gitee"
          w:text="6xl red-500"
          w:m="b-4"
        ></div>
        <div>Gitee</div>
      </div>
      <div @click="loginByQQ"
        w:flex="~ col nowrap"
        w:align="items-center"
        w:text="3xl gray-500"
        w:m="x-12"
      >
        <div class="iconfont icon-qq"
          w:text="6xl red-500"
          w:m="b-4"
        ></div>
        <div>QQ</div>
      </div>
      <!-- <div @click="loginByAliPay"
        w:flex="~ col nowrap"
        w:align="items-center"
        w:text="3xl gray-500"
        w:m="x-12"
      >
        <div class="iconfont icon-alipay"
          w:text="6xl blue-500"
          w:m="b-4"
        ></div>
        <div>支付宝</div>
      </div> -->
      <!-- <div @click="loginByWX"
        w:flex="~ col nowrap"
        w:align="items-center"
        w:text="3xl gray-500"
        w:m="x-12"
      >
        <div class="iconfont icon-wx"
          w:text="6xl green-500"
          w:m="b-4"
        ></div>
        <div>WeChat</div>
      </div> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
</style>

<route>
{
  name: "login",
  meta: {
    cache: true,
    title: "登录"
  }
}
</route>
  
<i18n>
{
  "en": {
  },
  "ja": {
  }
}
</i18n>